<template>
  <v-layout type="main">
    <!-- <p class="page-title">模型仓库</p> -->
    <!-- <div class="switch">
      <el-radio-group v-model="showThisActive" size="medium" @change="getData">
        <el-radio-button :label="0">我的模型</el-radio-button>
        <el-radio-button :label="1">共享模型</el-radio-button>
      </el-radio-group> -->
    <!-- <span>
        <a href="javascript:;" :class="['btn-pic', { 'acticv': !list_flag }]" @click="list_flag = false"></a>
        <a href="javascript:;" :class="['btn-lis', { 'acticv': list_flag }]" @click="list_flag = true"></a>
      </span> -->
    <!-- </div> -->
    <!-- <div class="alike-search-header"> -->
    <div class="clearfix">
      <div class="search-box">
        <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容"
          @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/model/detail' })">新增模型</a>
      </div>
    </div>
    <el-tabs v-model="showThisActive" @tab-click="getData">
      <el-tab-pane label="我的模型" name="0" />
      <el-tab-pane label="共享模型" name="1" />
    </el-tabs>
    <!-- </div> -->

    <div class="has-ver-table-layout">
      <div class="btns-switch">
        <span :class="`btn ${list_flag ? 'is-active' : ''}`" @click="list_flag = true">
          卡片
        </span>
        <span :class="`btn ${!list_flag ? 'is-active' : ''}`" @click="list_flag = false">
          列表
        </span>
      </div>

      <ul class="has-vers-lis" v-if="!list_flag">
        <li v-for="(e, i) in tableData" :key="i">
          <div class="lis-header">
            <div class="lis-header-name clearfix" @click="$router.push({ path: '/model/code', query: { id: e.id } })">
              <strong class="ehn">{{ e.name }}</strong>
              <span>
                <b>创建时间：{{ e.create_time }}</b>
                <b>创建人：{{ e.create_user && e.create_user.nick_name }}</b>
              </span>
            </div>
            <div class="clearfix">
              <a href="javascript:;" class="handle-btn-hollow"
                @click="$router.push({ path: '/model/versionsdetail', query: { modelID: e.id, version: e.version_index + 1 } })">新增版本</a>
              <a href="javascript:;" class="handle-btn-hollow" @click="delModel(e)">删除</a>
            </div>
          </div>
          <div class="ver-table">
            <el-table :data="e.latest_versions.slice(0, 3)" header-row-class-name="header-style">
              <el-table-column prop="version" label="版本">
                <template slot-scope="{ row }">
                  <el-popover placement="right-start" width="320" trigger="hover">
                    <row-data :row="row" />
                    <el-button type="text"
                      @click="$router.push({ path: '/model/code', query: { id: e.id, source_version_id: row.id } })"
                      slot="reference">{{ row.version }}</el-button>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="file_source" label="文件来源" />
              <el-table-column prop="commit" label="提交信息" />
              <el-table-column prop="update_time" label="修改时间" />
              <el-table-column prop="name" label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="del(row)">删除</el-button>
                </template>
              </el-table-column>
              <template slot="empty">
                <p>暂无版本</p>
              </template>
            </el-table>
          </div>
        </li>
      </ul>

      <ul class="alike-lis" v-else>
        <li v-for="(item, index) in tableData" :key="index">
          <div class="alike-lis-box">
            <div class="alike-lis-pic" @click="$router.push({ path: '/model/code', query: { id: item.id } })">
              <v-image :src="item.avatar ? item.avatar : require('@/assets/img/drone3.jpg')" alt="" />
            </div>
            <div class="alike-lis-word">
              <p class="alike-lis-title">
                <span>
                  <span @click="$router.push({ path: '/model/code', query: { id: item.id } })">
                    {{ item.name }}
                  </span>
                  <template v-if="typeof item.status === 'string'">
                    <el-tag type="danger" effect="dark" size="mini"
                      v-if="['terminated', 'failed', 'Failed'].includes(item.status)">
                      {{ statusMap[item.status] }}
                    </el-tag>
                    <el-tag type="success" effect="dark" size="mini"
                      v-else-if="['completed', 'Succeeded', 'running', 'Running'].includes(item.status)">
                      {{ statusMap[item.status] }}
                    </el-tag>
                    <el-tag type="warning" effect="dark" size="mini" v-else>
                      {{ statusMap[item.status] }}
                    </el-tag>
                  </template>
                </span>

                <el-popover placement="top" width="80" trigger="click" v-model="item.visible">
                  <p>您确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="del(item)">确定</el-button>
                  </div>
                  <!-- <el-button slot="reference" type="danger" size="mini">删除</el-button> -->
                  <i slot="reference" class="el-icon-delete delete-btn" />
                </el-popover>
              </p>

              <!-- <div class="alike-lis-type">
                数据类型/标签
              </div> -->

              <p class="alike-lis-hint">{{ item.desc }}</p>
              <p class="alike-lis-hint">版本数量：{{ item.version_index }}</p>
              <!-- <el-popover placement="bottom-end" width="80" trigger="hover">
                <a href="javascript:;" class="alike-lis-handle" @click="delModel(item)">删除</a>
                <a href="javascript:;" class="handle-btn" slot="reference">.<br />.<br />.</a>
              </el-popover> -->
            </div>
            <div class="alike-lis-user">
              <!-- <img src="@/assets/img/test-user-man.png" alt=""> -->
              <div class="avatar"></div>
              <span class="user-name">{{ item.create_user.username }}</span>
              <span class="date">{{ item.create_time }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="pagination-box">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { getModels, delModel } from "@/api/model"
import { delModelVersion } from "@/api/modelversion"
// import { paramMap } from '@/utils/maps'
export default {
  data() {
    return {
      showThisActive: 0,
      // list_flag: paramMap['list_flag'],
      list_flag: "0",
      tableData: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },

    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleChange(val) {
      this.list_flag = val
    },
    async getData() {
      let res = await getModels({ visibility: this.showThisActive, ...this.Pagedata })
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async delModel({ id }) {
      // let res = await this.$isDel();
      // if (res) {
      await delModel({ id })
      this.getData()
      // }
    },
    stop(row) {
      console.log(row)
    },
    async del(row) {
      // let res = await this.$isDel();
      // if (res) {
      await delModelVersion(row)
      this.getData()
      // }
    },
    setListOrGraph() {
      this.list_flag = !this.list_flag
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped>
.switch {
  display: flex;
  justify-content: space-between;

  // overflow: hidden;
  // padding-right: 500px;
  span {
    padding-right: 20px;
  }

  a {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 14px;
    margin-top: 10px;
    background-color: #767676;
  }

  .btn-pic {
    mask: url(~@/assets/img/file-icon/btn-pic.svg);
    mask-size: 20px 20px;
  }

  .btn-lis {
    mask: url(~@/assets/img/file-icon/btn-lis.svg);
    mask-size: 20px 20px;
  }

  .acticv {
    background-color: #409EFF;
  }

  .add-btn {
    float: left;
  }
}
</style>